<template>
  <div class="product-list cc">
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <!-- 轮播图 -->
      <Swiper :imgList="imgList" />

      <!-- 分类 -->
      <ul class="types bg-fff pb-10">
        <TypeItem
          :item="item"
          :index="index"
          v-for="(item, index) in typeList"
          :key="item.categoryId"
        />
      </ul>

      <div class="middle-content">
        <!-- 秒杀和拼团 -->
        <Miaosha />
        <!-- 推荐 -->
        <Tuijian />
        <!-- 商品列表 -->

        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="getProductList"
        >
          <div class="item-list bg-fff">
            <ul class="flex w100pc jc-sa fww">
              <Goods
                v-for="item in productList"
                :key="item.productId"
                :item="item"
              />
            </ul>
          </div>
        </van-list>

        <Footer :fixed="true"></Footer>
      </div>
    </van-pull-refresh>
  </div>
</template>

<script>
import Footer from "@/components/Footer.vue";
// 1. 导入http.js
import $http from "@/utils/http";
import Swiper from "./list2/Swiper.vue";
import TypeItem from "./list2/TypeItem.vue";
import Miaosha from "./list2/Miaosha.vue";
import Tuijian from "./list2/Tuijian.vue";
import Goods from "./list2/Goods.vue";
export default {
  components: { Footer, Swiper, TypeItem, Miaosha, Tuijian, Goods },
  data() {
    return {
      isLoading: false,
      loading: false,
      finished: false,
      // 当前页
      currPage: 1,
      // 商品列表
      productList: [],
      // 定义轮播图数组
      imgList: [],
      typeList: [],
      // 滚动条位置
      scrollHeight: 0,
    };
  },

  // 实例创建完毕
  created() {
    // this.getProductList();
    this.getImgList();
    this.getTypeList();
  },

  // 组件挂载后绑定scroll事件
  mounted() {
    window.addEventListener(
      "scroll",
      () => {
        // 保存滚动条位置
        if (window.scrollY > 0) {
          this.scrollHeight = window.scrollY;
        }
      },
      false
    );
  },

  // 进入组件
  activated() {
    // 滚动到最初的位置
    setTimeout(() => {
      window.scrollTo(0, this.scrollHeight);
    }, 0);
  },

  // 离开组件
  deactivated() {},

  methods: {
    // 下拉刷新
    onRefresh() {
      let params = {
        currPage: 1,
      };
      $http.get("/product/list", { params }).then((res) => {
        this.currPage = 2;
        this.isLoading = false;
        this.productList = res.list;
      });
    },

    // 获取轮播图片列表
    getImgList() {
      $http.get("/product/getBanners").then((res) => {
        console.log(res);
        this.imgList = res.banners;
      });
    },

    getTypeList() {
      $http.get("/category/all").then((res) => {
        console.log(res);
        this.typeList = res.list;
      });
    },

    // 发请求, 获取商品列表
    getProductList() {
      let params = {
        currPage: this.currPage,
      };
      $http.get("/product/list", { params }).then((res) => {
        this.currPage++;
        // 给productList重新赋值, 页面就会重新渲染
        this.productList = [...this.productList, ...res.list];
        this.loading = false;
        // 所有数据加载完毕, finished设为true
        if (res.list.length === 0) {
          this.finished = true;
        }
      });
    },
  },
};
</script>

<style lang="less">
@import "./list.less";
</style>

<style lang="less">
.product-list {
  .my-swipe {
    .img {
      width: 100%;
      height: 210px;
    }
    .van-swipe-item {
      color: #fff;
      font-size: 20px;
      line-height: 150px;
      text-align: center;
      background-color: #39a9ed;
    }
  }
  .van-icon-coupon-o::before {
    position: relative;
    top: 3px;
  }
}
</style>


